<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在热映--猫眼电影</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="main">
        <nav class="nav">
            <a href="" class="select">正在热映</a>
            <a href="">即将上映</a>
            <a href="">经典影片</a>
        </nav>
        <div class="container">
           <div class="choose-area">
               <div class="choose-item clearfix">
                   <div class="left">
                       类型：
                   </div>
                   <div class="right">
                        <ul class="clearfix">
                            <li class="select"><a href="">Lorem.</a></li>
                            <li><a href="">Excepturi!</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Voluptatibus?</a></li>
                            <li><a href="">Aliquam.</a></li>
                            <li><a href="">Perspiciatis!</a></li>
                            <li><a href="">Excepturi?</a></li>
                            <li><a href="">Incidunt.</a></li>
                            <li><a href="">Laudantium?</a></li>
                            <li><a href="">Praesentium.</a></li>
                            <li><a href="">Quam?</a></li>
                            <li><a href="">Corporis.</a></li>
                            <li><a href="">Impedit.</a></li>
                            <li><a href="">Fugiat.</a></li>
                            <li><a href="">Molestiae.</a></li>
                            <li><a href="">Dolores!</a></li>
                            <li><a href="">Maxime!</a></li>
                            <li><a href="">Accusamus.</a></li>
                            <li><a href="">Laborum?</a></li>
                            <li><a href="">Explicabo.</a></li>
                        </ul>
                   </div>
               </div>
               <div class="choose-item clearfix">
                   <div class="left">
                       区域：
                   </div>
                   <div class="right">
                       <ul class="clearfix">
                           <li class="select"><a href="">Lorem.</a></li>
                           <li><a href="">Iusto?</a></li>
                           <li><a href="">Reprehenderit?</a></li>
                           <li><a href="">A.</a></li>
                           <li><a href="">Laboriosam!</a></li>
                           <li><a href="">At?</a></li>
                           <li><a href="">Fugit.</a></li>
                           <li><a href="">Cum.</a></li>
                           <li><a href="">Voluptas.</a></li>
                           <li><a href="">Soluta.</a></li>
                           <li><a href="">Quo!</a></li>
                           <li><a href="">Ipsa.</a></li>
                           <li><a href="">Eos.</a></li>
                           <li><a href="">Beatae.</a></li>
                           <li><a href="">Id!</a></li>
                           <li><a href="">Vel.</a></li>
                           <li><a href="">Doloribus!</a></li>
                           <li><a href="">Esse.</a></li>
                           <li><a href="">Ducimus!</a></li>
                           <li><a href="">Ea.</a></li>
                       </ul>
                   </div>
               </div>
               <div class="choose-item clearfix no-line">
                   <div class="left">
                       年代：
                   </div>
                   <div class="right">
                       <ul class="clearfix">
                           <li class="select"><a href="">Lorem.</a></li>
                           <li><a href="">At?</a></li>
                           <li><a href="">Repudiandae?</a></li>
                           <li><a href="">Facilis!</a></li>
                           <li><a href="">In.</a></li>
                           <li><a href="">Sit.</a></li>
                           <li><a href="">Pariatur!</a></li>
                           <li><a href="">Omnis?</a></li>
                           <li><a href="">Porro!</a></li>
                           <li><a href="">Sed!</a></li>
                           <li><a href="">Ut.</a></li>
                           <li><a href="">Nulla?</a></li>
                           <li><a href="">Fuga?</a></li>
                           <li><a href="">Temporibus!</a></li>
                           <li><a href="">Culpa?</a></li>
                           <li><a href="">Porro!</a></li>
                           <li><a href="">Deserunt!</a></li>
                           <li><a href="">Veritatis.</a></li>
                           <li><a href="">Illo.</a></li>
                           <li><a href="">Magnam?</a></li>
                       </ul>
                   </div>
               </div>
               <div class="movies clearfix">
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./图片.jpg" alt="">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">奥特曼大战假面骑士</a>
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
           </div>
            <div class="paper">
                <a href="" class="select">上一页</a>
                <a href="">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="">5</a>
                <a href="">6</a>
                <a href="">7</a>
                <a href="">8</a>
                <a href="">9</a>
                <a href="">10</a>
                <a href="">下一页</a>
            </div>
        </div>
    </div>
</body>
</html>